<template>
  <div>
    <h2>Header</h2>
    <p>count {{ count }}</p>
    <input type="text" v-model.number="num" />
    <button @click="increase({ num })">加</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "Header",
  data() {
    return {
      num: 0,
    };
  },
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    // ...mapMutations(["increase"]),
    increase(payload) {
      //this.$store.commit("increase", payload)
      this.$store.commit({
        type: "increase",
        ...payload
      });
    },
  },
};
</script>

<style>
</style>